<template>
    <div class="admin-layout">
      <!-- 侧边栏 -->
      <AdminSidebar />
  
      <div class="main-content">
        <!-- 顶部导航栏 -->
        <AdminHeader />
  
        <!-- 内容区 -->
        <div class="content">
          <router-view />
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  import AdminSidebar from '../../components/backend/AdminSidebar.vue';
  import AdminHeader from '../../components/backend/AdminHeader.vue';
  
  export default defineComponent({
    name: 'AdminLayout',
    components: {
      AdminSidebar,
      AdminHeader,
    },
  });
  </script>
  
  <style scoped>
  .admin-layout {
    display: flex;
    min-height: 100vh;
  }
  
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .content {
    flex: 1;
    padding: 20px;
    background-color: #f5f5f5;
  }
  </style>